<template>
    <div class="main">
        <div class="head">
            <div class="logo" @click="goIndex"><img src="../assets/logo.png"/></div>
            <div class="menu">
                <div v-for="item in menuList" :key="item.url" class="menu-link">
                    <router-link :to="item.url" :class="{active: item.active}">{{item.name}}</router-link>
                </div>
            </div>
            <div class="user-info">
                <Dropdown placement="bottom-end">
                    <a href="javascript:void(0)" style="color: #808695">
                        关于
                        <Icon type="ios-arrow-down"></Icon>
                    </a>
                    <DropdownMenu slot="list">
                        <DropdownItem>历史版本</DropdownItem>
                    </DropdownMenu>
                </Dropdown>

                <Dropdown @on-click="topClick" placement="bottom-end">
                    <a href="javascript:void(0)">
                        <Avatar v-if="userInfo.avatarUrl && userInfo.avatarUrl !== ''" :src="userInfo.avatarUrl"></Avatar>
                        <Avatar v-else><Icon type="ios-person" size="24"/></Avatar>
                    </a>
                    <DropdownMenu slot="list">
                        <DropdownItem name="avatar">{{userInfo.name}}</DropdownItem>
                        <DropdownItem name="back" divided>管理后台</DropdownItem>
                        <DropdownItem name="logout">退出登录</DropdownItem>
                    </DropdownMenu>
                </Dropdown>
            </div>
        </div>
        <div style="height: 18px;background-color: #f5f5f5"></div>
        <div class="content" style="min-height: calc(100% - 78px);">
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                menuList:[{
                    url: '/project',
                    name: '我的项目',
                    active: true
                },{
                    url: '/server',
                    name: '服务器',
                    active: false
                },{
                    url: '/data',
                    name: '数据',
                    active: false
                },{
                    url: '/doc',
                    name: '文稿',
                    active: false
                },{
                    url: '/plugins',
                    name: '开发',
                    active: false
                }]
            };
        },
        created(){
            let flag = false;
            this.menuList.forEach((item)=>{
                if (this.$route.path.indexOf(item.url) === 0) {
                    item.active = true;
                    flag = true;
                } else {
                    item.active = false;
                }
            });
            if (!flag && this.$route.name === 'index') {
                this.goIndex();
            }
        },
        methods:{
            goIndex(){
                this.$router.push('/project');
            },
            topClick(name) {
                if (name === 'logout') {
                    this.$axios.get('/logout').then(() => {
                        this.$store.dispatch('clearUserInfo');
                        this.$router.push({name: 'login'});
                    });
                }
            }
        },
        watch:{
            '$route' (to) {
                this.menuList.forEach((item)=>{
                    if (item.url === to.path) {
                        item.active = true;
                    } else {
                        item.active = false;
                    }
                });
            }
        }
    };
</script>
<style lang="less" scoped>
    .main{
        width: 100%;
        height: 100%;

        .head {
            display: flex;
            padding: 14px 16px;
            font-size: 16px;
            box-shadow: 0 2px 2px rgba(0,0,0,0.03);
            background-color: #fff;
            width: 100%;
            z-index: 100;
            justify-content: space-between;
            align-items: center;

            a {
                color: 	#515a6e;
                &:hover {
                    color: #2d8cf0;
                }
            }

            .logo{
                cursor: pointer;
                width: 180px;
                img{
                    display: table-cell;
                    vertical-align: middle;
                }
            }

            .menu {
                width: 1024px;
                display: flex;
                align-items: center;
                flex-direction: row;

                .menu-link{
                    padding: 0 12px;
                    text-align: center;
                    a{
                        display: inline-block;
                        position: relative;
                        &.active{
                            color: #2d8cf0;
                            &:after{
                                content: "";
                                border-bottom: 3px solid #2d8cf0;
                                position: absolute;
                                display: inline-block;
                                top: 37px;
                                width: 100%;
                                left: 0;
                            }
                        }
                    }
                    &:first-child{
                        padding-left: 0;
                    }
                    .menu-input {
                        padding: 0 12px;
                        width: 200px;
                    }
                }
            }

            .user-info {
                width: 180px;
                text-align: right;
                &>div{
                    text-align: left;
                    margin-left: 16px;
                    i{
                        font-size: 12px;
                    }
                }
            }
        }
        .content {
            &>div{
                height: 100%;
            }
        }
    }

</style>